<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-input
          placeholder="姓名、用户名查询"
          @change="getData"
          clearable
          v-model="params.key"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <select-dept v-model="params.deptLevel" @change="getData"></select-dept>
      </el-form-item>
      <el-form-item>
        <select-bank-job v-model="params.job" @change="getData"></select-bank-job>
      </el-form-item>
      <!--<el-form-item>-->
      <!--<el-select v-model="params.status"-->
      <!--placeholder="员工状态">-->
      <!--<el-option value="有效"-->
      <!--name="1"></el-option>-->
      <!--<el-option value="禁用"-->
      <!--name="2"></el-option>-->
      <!--</el-select>-->
      <!--</el-form-item>-->
      <el-form-item>
        <el-button @click="getData()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="power" @click="onEdit()">添加账号</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border v-loading="loading">
      <!--<el-table-column label="工号"-->
      <!--prop="id"-->
      <!--align="center"></el-table-column>-->
      <el-table-column label="姓名" prop="realName" align="center"></el-table-column>

      <el-table-column label="角色" prop="jobName" align="center"></el-table-column>
      <el-table-column label="权限" align="center">
        <template slot-scope="scope">
          <el-tag
            type="info"
            class="job-tag"
            v-for="(p, index) in scope.row.scopesNameLabel"
            :key="index"
          >
            {{ p }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="用户名" prop="userName" align="center"></el-table-column>
      <el-table-column label="电话" prop="phoneNumber" align="center"></el-table-column>
      <el-table-column label="部门" prop="deptName" align="center"></el-table-column>
      <!--<el-table-column label="状态"-->
      <!--prop="status"-->
      <!--align="center">-->
      <!--<template slot-scope="scope">-->
      <!--{{ scope.row.isFreeze ? '失效' : '正常' }}-->
      <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column label="操作" v-if="power" align="center" width="300">
        <template slot-scope="scope" align="center">
          <el-button size="mini" @click="onEdit(scope.row)">编辑</el-button>
          <el-button
            size="mini"
            v-if="scope.row.job !== 'org_corp'"
            @click="confirmDelete(scope.row.userId)"
            type="danger"
            plain
          >
            删除
          </el-button>
          <el-button size="mini" type="danger" plain @click="resetPassWord(scope.row)">
            重置密码
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="query-pagination">
      <div class="text-muted p-2">共 {{ tableTotal }} 个员工</div>
    </div>
    <!--<div class="query-pagination p-2">-->
    <!--<el-pagination class="pull-right"-->
    <!--@current-change="getData"-->
    <!--:current-page.sync="params.index"-->
    <!--:page-size="params.size"-->
    <!--layout="total, prev, pager, next, jumper"-->
    <!--:total="tableTotal">-->
    <!--</el-pagination>-->
    <!--</div>-->

    <staff-edit :visible.sync="visible" :user-data="userData" @success="getData"></staff-edit>
  </div>
</template>

<script>
import SelectDept from '@/components/select/SelectDept'
import SelectBankJob from '@/bank/components/select/SelectBankJob'
import StaffEdit from './StaffEdit'

import { getStaff, deleteUser } from '@/common/api/auth'

export default {
  components: {
    SelectDept,
    SelectBankJob,
    StaffEdit,
  },

  props: {},

  data() {
    return {
      params: {
        deptId: '',
        index: 1,
        key: '',
        size: 10,
        job: '',
      },
      tableData: [],
      tableTotal: 0,
      loading: false,
      //
      visible: false,
      userData: null,
    }
  },

  computed: {
    job() {
      return this.$store.getters.user.job
    },
    power() {
      return this.job === 'org_corp'
    },
  },

  watch: {},

  created() {
    this.getData()
  },

  mounted() {},

  methods: {
    resetPassWord(row) {
      this.$utils
        .msgbox({
          message: `确认重置密码?重置后密码与账号一致`,
          type: 'info',
          beforeClose: () =>
            this.$http.put('/auth/user/reset/password/backstage/', { userId: row.userId }),
        })
        .then(() => {
          this.$message.success('操作成功！')
          this.getData()
        })
        .catch(err => this.$message.error(`操作失败，请重试！${err.data}`))
    },
    getData() {
      this.loading = true
      getStaff(this.params)
        .then(res => {
          // org_corp
          const data = res.data || []
          this.tableData = data.map(this.dataAdapter)
          this.tableTotal = this.tableData.length
        })
        .finally(() => {
          this.loading = false
        })
    },
    dataAdapter(item) {
      item.scopesNameLabel = item.scopesName ? item.scopesName.split('|') : []
      if (item.job === 'org_corp') {
        item.jobName = '管理员'
        item.scopesNameLabel.push('账号管理')
      }
      return item
    },
    confirmDelete(val) {
      this.$confirm('确定删除该员工?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          deleteUser(val).then(() => {
            this.$message.success('删除成功')
            this.getData()
          })
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },

    onEdit(data) {
      this.userData = data ? { ...data } : null
      this.visible = true
    },
  },
}
</script>

<style scoped></style>
